<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>pie</title>
    <script src="./echarts.min.js"></script>
  </head>
  <body>
    <div id="main" style="width: 600px; height: 400px"></div>
  </body>
  <script>
    const myCharts = echarts.init(document.getElementById("main"));
    const pieData = [
      { name: "京东", value: 11111 },
      { name: "淘宝", value: 21111 },
      { name: "美团", value: 15000 },
      { name: "拼多多", value: 99.9 },
    ];
    const option = {
      legend: {
        formatter: (arg) => {
          return arg;
        },
      },
      series: [
        {
          type: "pie",
          data: pieData,
          // radius:['30%','40%'],
          roseType: "radius", //南丁格尔图
          selectedMode:'multiple',  //'single', //选中效果
          selectedOffset:50,
          label: {
            show: true,
            formatter: (arg) => {
              console.log(arg);
              return arg.name + "\n" + arg.percent + "%";
            },
          },
        },
      ],
    };
    myCharts.setOption(option);
  </script>
</html>
